//   首页高亮
const xtxHomepage = document.querySelector('.xtxHomepage div:nth-child(2) ul')
xtxHomepage.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        document.querySelector('.xtxHomepage div:nth-child(2) ul a.active').classList.remove('active')
        e.target.classList.add('active')
    }
})


//首页2高亮
const xtxPage = document.querySelector('.xtxPage ul')
xtxPage.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        document.querySelector('.xtxPage ul li a.active').classList.remove('active')
        e.target.classList.add('active')
    }
})
const xtxBannerTop = document.querySelector('.xtxBanner').offsetTop
window.addEventListener('scroll', function () {
    const top = document.documentElement.scrollTop
    if (top > xtxBannerTop) {
        document.querySelector('.xtxPage').style.top = 0
        document.querySelector('.xtxPage').style.opacity = 1
    } else {
        document.querySelector('.xtxPage').style.top = '-80px'
        document.querySelector('.xtxPage').style.opacity = 0
    }
})

// 登录切换
const li1 = document.querySelector('.xtxLogin li:nth-child(1)')
const li2 = document.querySelector('.xtxLogin li:nth-child(2)')

function render() {
    const uname = localStorage.getItem('text')
    if (uname) {
        li1.innerHTML = `<a href="../html/personaleCenter.html"><i class="iconfont icon-xiaoren">${uname}</i></a>`
        li2.innerHTML = `<a href="#">退出登录</a>`
    } else {
        li1.innerHTML = `<a href="./login.html">请先登录</a>`
        li2.innerHTML = `<a href="./register.html">免费注册</a>`
    }
}
render()
li2.addEventListener('click', function () {
    localStorage.removeItem('text')
    render()
})


// 鼠标移入侧边栏 右边显示商品列表

// const layerGoods = document.querySelector('.xtxBanner .aside .goods-list li')
// const layer = document.querySelector('.xtxBanner .aside .layer')
// layerGoods.addEventListener('mouseenter', function () {
//     document.querySelector('.xtxBanner .layer').style.opacity = 1
// })
// layer.addEventListener('mouseleave', function () {
//     document.querySelector('.xtxBanner .layer').style.opacity = 0
// })




// 鼠标经过购物车显示购物车页面
const xtxPageCar = document.querySelector('.disabled')
xtxPageCar.addEventListener('mouseover', function () {
    document.querySelector('.xtxHomepage .box').style.display = 'block'
})

xtxPageCar.addEventListener('mouseout', function () {
    document.querySelector('.xtxHomepage .box').style.display = 'none'
})

// 点击删除实现删除购物车功能
const deletet = document.querySelectorAll('.disabled .item i')
for (let i = 0; i < deletet.length; i++) {
    deletet[i].addEventListener('click', function () {
        document.querySelector('.disabled .item').remove()
    })
}

// 鼠标经过居家查看全部跳转页面
const xthProduct = document.querySelector('.xthhomeProduct .xthMore')
xthProduct.addEventListener('click', function () {
    location.href = '../html./home.html'
})


//   轮播图
const data = [
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/e83efb1b-309c-46f7-98a3-f1fefa694338.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/4a79180a-1a5a-4042-8a77-4db0b9c800a8.jpg' },
]
const img = document.querySelector('.bannerPicture img')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')
const banner = document.querySelector('.banner')
const lis = document.querySelectorAll('.bannerIndicator li')
let index = 0
function fn() {
    img.src = data[index].url
    document.querySelector('.bannerIndicator li.active').classList.remove('active')
    lis[index].classList.add('active')
}
prev.addEventListener('click', function () {
    index++
    if (index > data.length - 1) {
        index = 0
    }
    fn()
})
next.addEventListener('click', function () {
    index--
    if (index < 0) {
        index = data.length - 1
    }
    fn()
})
let timeId = null
timeId = setInterval(function () {
    index++
    if (index > data.length - 1) {
        index = 0
    }
    fn()
}, 2000)
banner.addEventListener('mouseenter', function () {
    clearInterval(timeId)
    // prev.style.opacity = 1
    // next.style.opacity = 1
})
banner.addEventListener('mouseleave', function () {
    prev.style.opacity = 0
    next.style.opacity = 0
    timeId = setInterval(function () {
        index++
        if (index > data.length - 1) {
            index = 0
        }
        fn()
    }, 2000)
})
for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function () {
        index = i
        fn()
    })
}
//   新鲜好物
const FreshgoodsList = [
    { url: 'https://yanxuan-item.nosdn.127.net/605d71caa460e3c05cb2fd1b2885b9b4.jpg', name: '儿童字母纯棉POLO衫73-130cm', price: '¥99.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg', name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌', price: '￥444.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/1ee83dc27645e7bdc1bda228c04b85f3.jpg', name: '网易味央黑猪猪肘330g*1袋', price: '¥37.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg', name: '低帮城市休闲户外鞋天然牛皮COOLMAX纤维', price: '￥381.00' }
]
const FreshUl = document.querySelector('.homeFresh ul')
const FreshImg = document.querySelector('.homeFresh img')
const FreshName = document.querySelector('.homeFresh .name')
const FreshPrice = document.querySelector('.homeFresh .price')
let str = ''
FreshgoodsList.forEach(function (e) {
    str += `
         <li>
            <a href="#">
                <img src="${e.url}" alt="">
                <p class="name">${e.name}</p>
                <p class="price">${e.price}</p>
            </a>
        </li>
    `
})
FreshUl.innerHTML = str
//   人气推荐
const homeHotGoodsList = [
    { url: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg', name: '特惠推荐', introduce: '它们最实惠' },
    { url: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_2.jpg', name: '爆款推荐', introduce: '它们最受欢迎' },
    { url: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg', name: '一站全买', introduce: '使用场景下精心优选' },
    { url: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_4.jpg', name: '领券中心', introduce: '更多超值优惠券' }
]

const homeHotUl = document.querySelector('.homeHot ul')
const homeHotImg = document.querySelector('.homeHot img')
const homeHotName = document.querySelector('.homeHot .name')
const homeHotIntroduce = document.querySelector('.homeHot .introduce')
let str1 = ''
homeHotGoodsList.forEach(function (e) {
    str1 += `
       <li>
            <a href="#">
                <img src="${e.url}" alt="">
                <p class="name">${e.name}</p>
                <p class="introduce">${e.introduce}</p>
            </a>
        </li>
    `
})
homeHotUl.innerHTML = str1

//   热门品牌
const homeBrandImg = [
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b5fd7624-1d1e-4ed9-b739-a8f44f2d08fc.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/fdbc5113-dcca-4b7f-b1d6-c51faf8e3de9.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/cc95ddbf-f2f8-4c48-9845-0c5364557198.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/cdeaf7eb-a68f-485c-9fc3-82358ebed83b.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/bb0411c8-0407-460b-9db2-e1ca377d7227.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/7f6a7b20-7902-4b43-b9c5-f33151ef1334.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/4f998a72-6c37-44fc-bb28-c017541868e8.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/07b52b63-d128-491f-b55e-ad9192a6baeb.jpg' }
]
const homeBrandUl = document.querySelector('.xthhomeBrand .homeBrand ul')
let str3 = ''
homeBrandImg.forEach(function (e) {
    str3 += `
<li>
        <a href="#">
            <img src="${e.url}"
                alt="">
        </a>
</li>
    `
})
homeBrandUl.innerHTML = str3


//  阻止热门品牌左右箭头的默认事件
const img1 = document.querySelector('.homeBrand img')
const Right = document.querySelector('.watchAll #right1')
Right.addEventListener('click', function (e) {
    e.preventDefault()
    document.querySelector('.homeBrand ul').style.left = -img1.offsetWidth * 5 - 50 + 'px'
})
const Left = document.querySelector('.watchAll #left1')
Left.addEventListener('click', function (e) {
    e.preventDefault()
    document.querySelector('.homeBrand ul').style.left = 0
})


// 点击热门品牌左右箭头实现高亮
const watchAll = document.querySelector('.xthhomeBrand .watchAll')
watchAll.addEventListener('click', function (e) {
    if (e.target.tagName === 'I') {
        document.querySelector('.xthhomeBrand .watchAll i.active').classList.remove('active')
        e.target.classList.add('active')
    }
})





//   居家
const homeProduct = [
    { url: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png', name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器', desc: '以汝瓷为载体制作的温酒器套组，酒器精美，酒杯玲珑、淡淡的天青釉色，足以让酒席上，再添几分色彩。', price: '¥488.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg', name: '日式黑陶功夫茶组双侧把茶具礼盒装', desc: '日式风格单把设计防烫隔热美观大气', price: '¥288.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/fc266553a5b00280ab835e83a660ef14.jpg', name: '智能温控细嘴流速刚刚好咖啡手冲壶电热水壶', desc: '智能温控出水流畅，容易操控', price: '¥389.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png', name: '大师监制龙泉青瓷茶叶罐', desc: '世界非遗|青瓷世家出品|釉润如玉', price: '¥139.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/5b3c61cf75a2480774616f5662a5bccf.jpg', name: '精酿经典啤酒杯可乐杯气泡水杯两支装', desc: '意大利进口精酿啤酒杯与百年制杯历史的波兰经典啤酒杯', price: '¥99.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg', name: '称心如意手摇咖啡磨豆机咖啡豆研磨机', desc: '随时随地享受自然美味', price: '¥289.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png', name: '竹制干泡茶盘正方形沥水茶台品茶盘', desc: '干泡蓄水拆洗方便轻便实用', price: '¥109.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/b011048adc2bf3952c72e741e47d1419.jpg', name: '电动红酒醒酒器分酒器取酒器', desc: '贴心醒酒阀设计，随心开启，自由切换、轻松开启和关闭醒酒器功能', price: '¥169.00' },
]
const homeProductUl = document.querySelector('.xthhomeProduct .container .box ul')
let str4 = ''
homeProduct.forEach(function (e) {
    str4 += `
     <li>
        <div class="goods-item">
            <a href="#"><img src="${e.url}" alt=""></a>
            <p class="name">${e.name}</p>
            <p class="desc">${e.desc}</p>
            <p class="price">${e.price}</p>
             <div class="extra">
                <a href="#">
                    <span>找相似</span>
                    <span>发现现多宝贝 ></span>
                </a>
            </div> 
        </div>
    `
})
homeProductUl.innerHTML = str4

//   美食
const homeDelicacy = [
    { url: 'https://yanxuan-item.nosdn.127.net/a078d2c4b8559b0a54430a0dc6460095.jpg', name: '网易味央黑猪大排330g*1袋', desc: '安心黑猪甄选好礼', price: '¥37.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/e47ffac6fe8d65f2d77b449d7ccf2fc3.jpg', name: '网易味央黑猪猪蹄330g*1袋', desc: '安心黑猪甄选好礼', price: '¥38.90' },
    { url: 'https://yanxuan-item.nosdn.127.net/1ee83dc27645e7bdc1bda228c04b85f3.jpg', name: '网易味央黑猪猪肘330g*1袋', desc: '安心黑猪甄选好礼', price: '¥37.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/b6e1cfa68ee53719b7ab2c8e0dc20916.jpg', name: '去皮去刺，辅食好选择，比目鱼纯肉250g', desc: '鲜香海味，助力宝贝成长', price: '¥43.80' },
    { url: 'https://yanxuan-item.nosdn.127.net/1a960d40c5b68db1cd54bb9ccf8d7f18.png', name: '鲜甜海味，深海大虾200g', desc: '人工筛选优质大虾，可做宝贝辅食', price: '¥26.80' },
    { url: 'https://yanxuan-item.nosdn.127.net/6cae31d27cb10e86baec46f555aa9d2d.jpg', name: '虾肉饱满紧实，人工去头开背虾500g', desc: '虾肉饱满紧实，可做宝宝辅食', price: '¥55.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/c1cdf62c5908659a9e4c8c2f9df218fd.png', name: '中段精华，银鳕鱼切片200g', desc: '“餐桌上的营养师”，蛋白质丰富', price: '¥109.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/510236a410c37836c6002ba927999ad5.png', name: '营养高蛋白鲜嫩黑鱼片300克', desc: '活鱼切片，免洗免浆', price: '¥33.80' },
]
const homeDelicacyUl = document.querySelector('.xthhomeDelicacy .container .box ul')
let str5 = ''
homeDelicacy.forEach(function (e) {
    str5 += `
     <li>
        <div class="goods-item">
            <a href="#"><img src="${e.url}" alt=""></a>
            <p class="name">${e.name}</p>
            <p class="desc">${e.desc}</p>
            <p class="price">${e.price}</p>
             <div class="extra">
                <a href="#">
                    <span>找相似</span>
                    <span>发现现多宝贝 ></span>
                </a>
            </div> 
        </div>
    `
})
homeDelicacyUl.innerHTML = str5

//   服饰
const homeClothes = [
    { url: 'https://yanxuan-item.nosdn.127.net/1f451c780f5e1e93ced6419f2d3461fd.jpg', name: '男女经典两带式软木拖鞋', desc: '经典两带式，舒适不过时', price: '¥79.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/65aaa061f6ef6834c93018d2aeb79693.jpg', name: 'KENROLL吾皇潮趣男女室外拖鞋', desc: '潮流吾皇万睡', price: '¥139.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/f598065789526b53a8a67d7482a2f357.jpg', name: 'KENROLL室外防滑男女运动拖鞋', desc: '潮流外穿，运动鞋型', price: '¥139.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/52fdcb0012a0939fc4d92c1e04fccda8.jpg', name: 'KENROLL男女简洁多彩一片式室外拖', desc: '多彩多色，夏日出行防护', price: '¥99.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg', name: 'Kenroll女士防滑夏季人字沙滩拖鞋', desc: '清爽人字拖鞋，轻松夏日出行', price: '¥99.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/67c69cf439cbaea3cc34b9ea8859573e.png', name: '小泡芙-简约两条带女式高跟凉鞋', desc: '摩登有质感，泡芙般柔软触感', price: '¥171.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/43261ae2406e3d620deb42e32c7a54ed.png', name: '男式头层牛皮软底豆豆鞋', desc: '舒适生活，悦享品质', price: '¥248.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/a4cd3263546e2d384fd549cda9a0761e.png', name: '简约真皮交叉带女式平底拖鞋', desc: '给你的jio泡芙包裹的温柔感', price: '¥229.00' },
]
const homeClothesUl = document.querySelector('.xthhomeClothes .container .box ul')
let str6 = ''
homeClothes.forEach(function (e) {
    str6 += `
     <li>
        <div class="goods-item">
            <a href="#"><img src="${e.url}" alt=""></a>
            <p class="name">${e.name}</p>
            <p class="desc">${e.desc}</p>
            <p class="price">${e.price}</p>
             <div class="extra">
                <a href="#">
                    <span>找相似</span>
                    <span>发现现多宝贝 ></span>
                </a>
            </div> 
        </div>
    `
})
homeClothesUl.innerHTML = str6

//   母婴
const homeChild = [
    { url: 'https://yanxuan-item.nosdn.127.net/605d71caa460e3c05cb2fd1b2885b9b4.jpg', name: '儿童字母纯棉POLO衫73-130cm', desc: '甄选100%纯棉面料，手感细腻柔软，穿着舒适透气。', price: '¥99.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/ddb4a80ac97a175bc633f0a53076815a.jpg', name: '儿童多色圆领印花短袖T恤110-160cm', desc: '40S精梳棉面料，手感柔软细腻，舒适透气，耐洗耐穿', price: '¥59.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/6d09b5d5f964b33f401b0c8a9cbea1ca.png', name: '索罗娜面料，圆领印花插肩袖T恤110-160cm', desc: '索罗娜玉米纤维，杜邦新科技面料，绵软干爽舒适', price: '¥59.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/3fbdf00e31de69f049ccde1fb7ba478d.png', name: '打翻春天调色盘，儿童印花套头卫衣5-16岁', desc: '色彩丰富，落肩款自带时髦感', price: '¥86.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/9ad83e8d9670b10a19b30596327cfd14.png', name: '趣味美食家，儿童圆领印花卫衣5-16岁', desc: '甄选新疆棉，舒适透气', price: '¥99.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/33ce94abe337dfd442ce8640401af5fe.jpg', name: '2021年春季新品，儿童纯棉长袖T恤73-130cm', desc: '多色可选，童趣别致', price: '¥59.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/11fdc566c7183e77bb36913dc79c57e4.jpg', name: '2021春季新品，宝宝四季连体哈衣59-90cm', desc: '不同开襟方式，穿出更多花样', price: '¥55.00' },
    { url: 'https://yanxuan-item.nosdn.127.net/dc5031d0b9bcd473d28776546954dd41.jpg', name: '21春季新品，儿童时尚圆领卫衣1-8岁', desc: '多色卫衣，穿搭小达人', price: '¥85.00' },
]
const homeChildUl = document.querySelector('.xthhomeChild .container .box ul')
let str7 = ''
homeChild.forEach(function (e) {
    str7 += `
     <li>
        <div class="goods-item">
            <a href="#"><img src="${e.url}" alt=""></a>
            <p class="name">${e.name}</p>
            <p class="desc">${e.desc}</p>
            <p class="price">${e.price}</p>
             <div class="extra">
                <a href="#">
                    <span>找相似</span>
                    <span>发现现多宝贝 ></span>
                </a>
            </div> 
        </div>
    `
})
homeChildUl.innerHTML = str7